<template>
    <el-form ref="queryFormRef" :model="queryForm" inline size="mini">
        <el-form-item label="班级名称" prop="className">
            <el-input v-model="queryForm.className"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button type="info" @click="formRest('queryForm'), getClassesList()">重置</el-button>
        </el-form-item>
        <!-- 添加 -->
        <el-row>
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">添加</el-button>
        </el-row>
        <!-- 表格 -->
        <el-table :data="classList" style="width: 100%">
            <el-table-column type="index" label="#" align="center"></el-table-column>
            <el-table-column prop="className" label="班级名称" align="center"></el-table-column>
            <el-table-column prop="stuCount" label="班级人数" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
            <el-table-column prop="updateTime" label="修改时间" align="center"></el-table-column>
            <!-- 编辑 -->
            <el-table-column label="操作" width="200" align="center">
                <template #default="{ row }">
                    <el-button type="text" icon="el-icon-edit-outline" @click="handleEdit(row)">编辑</el-button>
                    <el-button type="text" icon="el-icon-delete" @click="handleDel(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row style="margin-top: 10px;" type="flex" justify="center">
            <el-pagination layout="prev, pager, next" :total="pagination.total" :page-size="pagination.pageSize"
                :current-page.sync="pagination.pageNum" @current-change="getClassesList"></el-pagination>
        </el-row>
        <!-- 弹窗 -->
        <el-dialog :before-close="handleClose" :visible="dialog.visible" width="400px" @close="formRest('dialogForm')">
            <template #title>
                {{ dialog.mode == 'add' ? '添加班级' : '编辑班级信息' }}
            </template>
            <el-form ref="dialogFormRef" label-width="80px" label-position="top" size="small" :rules="dialog.rules"
                :model="dialog.form">
                <el-form-item label="班级名称" prop="className">
                    <el-input v-model="dialog.form.className"></el-input>
                </el-form-item>
            </el-form>
            <el-row type="flex" justify="center" style="margin-top: 40px;">
                <el-button type="primary" size="small" @click="handleSubmit">确认</el-button>
                <el-button size="small" @click="handleClose">取消</el-button>
            </el-row>
        </el-dialog>
    </el-form>
</template>
<script>
import { listClasses, addClasses, editClasses, delClasses } from '@/api/classes.js'
import { query } from '@/utils/common.js'
export default {
    name: "Classes",
    data() {
        return {
            queryForm: {
                className: undefined,
                classId: undefined,
            },
            // 班级列表
            classList: [],
            // 分页
            pagination: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
            },
            // 当前的班级信息
            curClasses: {},
            // 弹窗
            dialog: {
                mode: 'add', //更换模式
                visible: false,
                form: {
                    "className": undefined,
                    "classId": undefined,
                },
                rules: {
                    className: [{ required: true, message: '请输入班级', trigger: 'blur' }],
                }
            }
        }
    },
    created() {
        this.getClassesList()
    },
    methods: {
        // 获取班级列表
        getClassesList(query = {}) {
            const { total, ...res } = this.pagination
            listClasses({ ...res, ...query }).then(res => {
                this.pagination.total = res.data.count
                console.log(this.pagination.total)
                this.classList = res.data.rows
                console.log(this.classList)
            })
        },
        // 查询
        handleQuery() {
            // 判断当前输入框是否有数据
            const hasInput = query(this.queryForm)
            // 每一项不符合
            if (!hasInput) return this.$message.warning("没有输入值，请至少输入一项!")
            // 符合
            this.getClassesList(this.queryForm)
        },
        // 重置
        formRest(val) {
            this.$refs[`${val}Ref`].resetFields()
        },
        // 添加
        handleAdd() {
            this.dialog.visible = true
            // 更换弹窗模式
            this.dialog.mode = 'add'
        },
        // 编辑
        handleEdit(row) {
            this.dialog.visible = true
            // 更换弹窗模式
            this.dialog.mode = 'edit'
            // 等dom渲染完毕之后再更新数据
            this.$nextTick(() => {
                // 浅拷贝:新旧数据之间相互影响
                // 深拷贝：数据独立，不会被影响
                this.dialog.form = JSON.parse(JSON.stringify(row))
                console.log(this.dialog.form)
            })
        },
        // 删除
        handleDel(row) {
            console.log(row)
            this.$confirm(`是否删除该班【${row.className}】?`, '系统提示', {
                type: 'warning'
            }).then(() => {
                delClasses(row.classId).then(res => {
                    this.$message.success(res.msg)
                    this.getClassesList()
                    console.log(row.classId)
                })
            })
                .catch(() => { })
        },
        // 提交
        handleSubmit() {
            this.$refs['dialogFormRef'].validate(async value => {
                console.log(value)
                // 校验不通过
                if (!value) return
                // 校验通过
                // 传递参数的时候过滤信息
                const { className, classId } = this.dialog.form
                let result = {}
                try {

                    switch (this.dialog.mode) {
                        case 'add':
                            result = await addClasses({ className })
                            break
                        case 'edit':
                            result = await editClasses({ className, classId })
                            break
                    }

                } catch (error) {

                }
                this.$message.success(result.msg)
                // 更新学生信息
                this.getClassesList()
                // 关闭弹窗
                this.dialog.visible = false
                // 清空表单
                this.formRest('dialogForm')

            })
        },
        // 取消
        handleClose() {
            this.dialog.visible = false
            // 清空表单
            this.formRest('dialogForm')
        },

    }
}
</script>